<template>
  <div id="app">
    <a-tabs v-model="curTab">
      <a-tab-pane :key="0" tab="分页表格" />
      <a-tab-pane :key="1" tab="下拉选项" />
      <a-tab-pane :key="2" tab="级联选择" />
      <a-tab-pane :key="3" tab="船公司">
        <agent-list />
      </a-tab-pane>
      <a-tab-pane :key="4" tab="锚点页面" />
      <a-tab-pane :key="5" tab="其他" />
      <a-tab-pane :key="6" tab="删除确认">
        <a-button type="link" @click="deleteModalVisible = true">确认删除吗？</a-button>
        <delete-modal v-model="deleteModalVisible" />
      </a-tab-pane>
    </a-tabs>
    <component ref="curComp" class="mt-2" :is="currentView"></component>
  </div>
</template>
<script>
import Vue from 'vue'
import { Tabs } from 'ant-design-vue'
import Table from '@/demo/table/index'
import SSelect from '@/demo/select/index'
import AgentList from '@/demo/AgentList/index'
import Cascader from '@/demo/cascader/index'
import DeleteModal from '@packages/biz/DeleteModal.vue'
Vue.use(Tabs)
export default {
  name: 'SophiaConsoleAdminComponents',
  components: {
    Table,
    SSelect,
    Cascader,
    AgentList,
    DeleteModal
  },
  computed: {
    currentView () {
      return this.currentTab[this.curTab]
    }
  },
  data () {
    return {
      curTab: 1,
      currentTab: {
        0: 'Table',
        1: 'SSelect',
        2: 'Cascader',
        3: 'AgentList',
        4: '',
        5: ''
      },
      deleteModalVisible: false
    }
  }
}
</script>
<style>
#app {
  height: 100vh;
}
</style>
